import React, { useState } from 'react'
import { motion } from 'framer-motion'
import { Award, Star, Users, TrendingUp, CheckCircle, Clock, Upload, FileText, Music, Image, Video, Shield, Crown, Star as StarIcon } from 'lucide-react'

const CreatorCertification = () => {
  const [activeTab, setActiveTab] = useState('overview')

  const tabs = [
    { id: 'overview', name: '认证概览', icon: Award },
    { id: 'requirements', name: '认证要求', icon: CheckCircle },
    { id: 'application', name: '申请认证', icon: Upload },
    { id: 'benefits', name: '认证权益', icon: Star }
  ]

  const certificationLevels = [
    {
      id: 'novice',
      name: '新手创作者',
      description: '刚加入平台的创作者',
      requirements: {
        works: 0,
        followers: 0,
        quality: '基础'
      },
      benefits: [
        '基础创作工具',
        '社区互动',
        '作品展示'
      ],
      color: 'from-gray-400 to-gray-600',
      icon: '🌱',
      current: true
    },
    {
      id: 'creator',
      name: '认证创作者',
      description: '有一定创作经验的创作者',
      requirements: {
        works: 5,
        followers: 100,
        quality: '良好'
      },
      benefits: [
        '高级创作工具',
        '优先推荐',
        '数据分析',
        '专属标识'
      ],
      color: 'from-blue-400 to-blue-600',
      icon: '🎨',
      current: false
    },
    {
      id: 'expert',
      name: '专家创作者',
      description: '在特定领域有专业能力的创作者',
      requirements: {
        works: 20,
        followers: 1000,
        quality: '优秀'
      },
      benefits: [
        '专业创作工具',
        '平台合作',
        '收入分成',
        '导师资格'
      ],
      color: 'from-purple-400 to-purple-600',
      icon: '👑',
      current: false
    },
    {
      id: 'master',
      name: '大师创作者',
      description: '在平台有重大影响力和贡献的创作者',
      requirements: {
        works: 50,
        followers: 5000,
        quality: '卓越'
      },
      benefits: [
        '大师级工具',
        '平台代言',
        '高额分成',
        '专属特权'
      ],
      color: 'from-jing-gold to-yellow-500',
      icon: '🏆',
      current: false
    }
  ]

  const userProgress = {
    currentLevel: 'novice',
    nextLevel: 'creator',
    progress: 35,
    works: 2,
    followers: 45,
    quality: '良好',
    achievements: [
      { name: '首次创作', earned: true, date: '2024-01-15' },
      { name: '获得点赞', earned: true, date: '2024-01-20' },
      { name: '作品被收藏', earned: true, date: '2024-01-25' },
      { name: '粉丝破百', earned: false, date: null },
      { name: '作品破十', earned: false, date: null }
    ]
  }

  const applicationRequirements = [
    {
      category: '作品质量',
      requirements: [
        '至少5个高质量原创作品',
        '作品获得社区认可',
        '无抄袭或侵权内容'
      ],
      status: 'incomplete'
    },
    {
      category: '社区参与',
      requirements: [
        '积极参与社区讨论',
        '帮助其他创作者',
        '遵守社区规范'
      ],
      status: 'complete'
    },
    {
      category: '专业能力',
      requirements: [
        '在特定领域有专业见解',
        '能够创作高质量内容',
        '有持续创作能力'
      ],
      status: 'incomplete'
    }
  ]

  const benefits = [
    {
      level: '认证创作者',
      benefits: [
        { name: '高级AI模型', description: '使用更强大的AI创作工具', icon: Music },
        { name: '优先推荐', description: '作品在平台获得优先展示', icon: TrendingUp },
        { name: '数据分析', description: '详细的创作数据分析报告', icon: TrendingUp },
        { name: '专属标识', description: '个人页面显示认证徽章', icon: Award }
      ]
    },
    {
      level: '专家创作者',
      benefits: [
        { name: '专业工具', description: '使用专业级创作工具套件', icon: FileText },
        { name: '平台合作', description: '参与平台官方合作项目', icon: Users },
        { name: '收入分成', description: '获得作品商业化收入分成', icon: Star },
        { name: '导师资格', description: '可以指导新手创作者', icon: Shield }
      ]
    }
  ]

  return (
    <div className="min-h-screen pt-16 theme-creator">
      <div className="max-w-7xl mx-auto px-4 py-8">
        {/* Header */}
        <motion.div
          className="text-center mb-12"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6 }}
        >
          <h1 className="text-6xl font-bold jing-text-gradient mb-6 jing-title text-shadow-xl">
            创作者认证体系
          </h1>
          <p className="text-xl text-white/80 max-w-3xl mx-auto jing-content">
            🏆 通过专业认证，解锁更多创作工具和平台权益
          </p>
        </motion.div>

        {/* 标签页导航 */}
        <motion.div
          className="jing-card mb-8"
          initial={{ opacity: 0, y: 20 }}
          animate={{ opacity: 1, y: 0 }}
          transition={{ duration: 0.6, delay: 0.2 }}
        >
          <div className="flex space-x-1 bg-white/10 p-1 rounded-lg">
            {tabs.map((tab) => {
              const Icon = tab.icon
              return (
                <button
                  key={tab.id}
                  onClick={() => setActiveTab(tab.id)}
                  className={`flex-1 flex items-center justify-center space-x-2 py-3 px-4 rounded-lg transition-all duration-300 ${
                    activeTab === tab.id
                      ? 'bg-jing-red text-white'
                      : 'text-white/70 hover:text-white hover:bg-white/10'
                  }`}
                >
                  <Icon size={18} />
                  <span>{tab.name}</span>
                </button>
              )
            })}
          </div>
        </motion.div>

        {/* 内容区域 */}
        {activeTab === 'overview' && (
          <motion.div
            className="space-y-8"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            {/* 当前状态 */}
            <div className="jing-card">
              <h2 className="text-2xl font-bold text-white mb-6">当前认证状态</h2>
              <div className="grid md:grid-cols-2 gap-6">
                <div className="space-y-4">
                  <div className="flex items-center space-x-4">
                    <div className="w-16 h-16 jing-gradient rounded-full flex items-center justify-center text-2xl">
                      {certificationLevels.find(l => l.id === userProgress.currentLevel)?.icon}
                    </div>
                    <div>
                      <h3 className="text-xl font-bold text-white">
                        {certificationLevels.find(l => l.id === userProgress.currentLevel)?.name}
                      </h3>
                      <p className="text-white/70">
                        {certificationLevels.find(l => l.id === userProgress.currentLevel)?.description}
                      </p>
                    </div>
                  </div>
                  
                  <div className="space-y-3">
                    <div className="flex justify-between text-white/70">
                      <span>作品数量</span>
                      <span className="text-white">{userProgress.works} / 5</span>
                    </div>
                    <div className="flex justify-between text-white/70">
                      <span>粉丝数量</span>
                      <span className="text-white">{userProgress.followers} / 100</span>
                    </div>
                    <div className="flex justify-between text-white/70">
                      <span>作品质量</span>
                      <span className="text-white">{userProgress.quality}</span>
                    </div>
                  </div>
                </div>

                <div className="space-y-4">
                  <h4 className="text-lg font-semibold text-white">升级进度</h4>
                  <div className="space-y-2">
                    <div className="flex justify-between text-sm text-white/70">
                      <span>距离下一等级</span>
                      <span>{userProgress.progress}%</span>
                    </div>
                    <div className="w-full bg-white/20 rounded-full h-3">
                      <div 
                        className="h-full jing-gradient rounded-full transition-all duration-500"
                        style={{ width: `${userProgress.progress}%` }}
                      ></div>
                    </div>
                  </div>

                  <div className="space-y-2">
                    <h4 className="text-lg font-semibold text-white">成就徽章</h4>
                    <div className="flex flex-wrap gap-2">
                      {userProgress.achievements.map((achievement, index) => (
                        <div
                          key={index}
                          className={`px-3 py-1 rounded-full text-sm flex items-center space-x-1 ${
                            achievement.earned
                              ? 'bg-jing-gold/20 text-jing-gold'
                              : 'bg-white/10 text-white/50'
                          }`}
                        >
                          {achievement.earned ? <CheckCircle size={14} /> : <Clock size={14} />}
                          <span>{achievement.name}</span>
                        </div>
                      ))}
                    </div>
                  </div>
                </div>
              </div>
            </div>

            {/* 认证等级 */}
            <div className="jing-card">
              <h2 className="text-2xl font-bold text-white mb-6">认证等级体系</h2>
              <div className="grid md:grid-cols-2 lg:grid-cols-4 gap-6">
                {certificationLevels.map((level, index) => (
                  <motion.div
                    key={level.id}
                    className={`p-6 rounded-xl border-2 transition-all ${
                      level.current
                        ? 'border-jing-red bg-jing-red/20'
                        : 'border-white/20 hover:border-white/40'
                    }`}
                    initial={{ opacity: 0, y: 20 }}
                    animate={{ opacity: 1, y: 0 }}
                    transition={{ duration: 0.6, delay: index * 0.1 }}
                    whileHover={{ scale: 1.02 }}
                  >
                    <div className="text-center mb-4">
                      <div className="text-4xl mb-2">{level.icon}</div>
                      <h3 className="text-lg font-bold text-white mb-1">{level.name}</h3>
                      <p className="text-white/70 text-sm">{level.description}</p>
                    </div>

                    <div className="space-y-3">
                      <div className="text-sm text-white/70">
                        <div>作品: {level.requirements.works}+</div>
                        <div>粉丝: {level.requirements.followers}+</div>
                        <div>质量: {level.requirements.quality}</div>
                      </div>

                      <div className="space-y-1">
                        {level.benefits.slice(0, 2).map((benefit, idx) => (
                          <div key={idx} className="text-xs text-white/60">
                            • {benefit}
                          </div>
                        ))}
                        {level.benefits.length > 2 && (
                          <div className="text-xs text-white/60">
                            +{level.benefits.length - 2} 更多权益
                          </div>
                        )}
                      </div>
                    </div>
                  </motion.div>
                ))}
              </div>
            </div>
          </motion.div>
        )}

        {activeTab === 'requirements' && (
          <motion.div
            className="space-y-8"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            <div className="jing-card">
              <h2 className="text-2xl font-bold text-white mb-6">认证要求详情</h2>
              <div className="space-y-6">
                {applicationRequirements.map((req, index) => (
                  <motion.div
                    key={index}
                    className="p-6 glass-effect rounded-lg"
                    initial={{ opacity: 0, x: -20 }}
                    animate={{ opacity: 1, x: 0 }}
                    transition={{ duration: 0.6, delay: index * 0.1 }}
                  >
                    <div className="flex items-center justify-between mb-4">
                      <h3 className="text-xl font-bold text-white">{req.category}</h3>
                      <span className={`px-3 py-1 rounded-full text-sm ${
                        req.status === 'complete'
                          ? 'bg-green-500/20 text-green-400'
                          : 'bg-yellow-500/20 text-yellow-400'
                      }`}>
                        {req.status === 'complete' ? '已完成' : '进行中'}
                      </span>
                    </div>
                    <div className="space-y-2">
                      {req.requirements.map((requirement, idx) => (
                        <div key={idx} className="flex items-center space-x-2 text-white/80">
                          <CheckCircle size={16} className="text-green-400" />
                          <span>{requirement}</span>
                        </div>
                      ))}
                    </div>
                  </motion.div>
                ))}
              </div>
            </div>
          </motion.div>
        )}

        {activeTab === 'application' && (
          <motion.div
            className="space-y-8"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            <div className="jing-card">
              <h2 className="text-2xl font-bold text-white mb-6">申请认证</h2>
              <div className="space-y-6">
                <div className="grid md:grid-cols-2 gap-6">
                  <div>
                    <label className="block text-white/80 mb-2">选择认证等级</label>
                    <select className="jing-input w-full">
                      <option>认证创作者</option>
                      <option>专家创作者</option>
                      <option>大师创作者</option>
                    </select>
                  </div>
                  <div>
                    <label className="block text-white/80 mb-2">专业领域</label>
                    <select className="jing-input w-full">
                      <option>AI京歌创作</option>
                      <option>情景剧本创作</option>
                      <option>视觉设计</option>
                      <option>文化研究</option>
                    </select>
                  </div>
                </div>

                <div>
                  <label className="block text-white/80 mb-2">申请理由</label>
                  <textarea
                    className="jing-input w-full h-32 resize-none"
                    placeholder="请详细说明您的创作经验、专业能力和申请理由..."
                  />
                </div>

                <div>
                  <label className="block text-white/80 mb-2">代表作品</label>
                  <div className="grid md:grid-cols-3 gap-4">
                    {[1, 2, 3].map((item) => (
                      <div key={item} className="p-4 glass-effect rounded-lg text-center">
                        <Upload size={32} className="text-white/60 mx-auto mb-2" />
                        <div className="text-white/60 text-sm">上传作品 {item}</div>
                      </div>
                    ))}
                  </div>
                </div>

                <div className="flex space-x-4">
                  <button className="jing-button flex items-center space-x-2">
                    <Upload size={18} />
                    <span>提交申请</span>
                  </button>
                  <button className="glass-effect px-6 py-3 rounded-lg text-white hover:bg-white/20 transition-all">
                    保存草稿
                  </button>
                </div>
              </div>
            </div>
          </motion.div>
        )}

        {activeTab === 'benefits' && (
          <motion.div
            className="space-y-8"
            initial={{ opacity: 0, y: 20 }}
            animate={{ opacity: 1, y: 0 }}
            transition={{ duration: 0.6 }}
          >
            {benefits.map((benefitGroup, index) => (
              <motion.div
                key={index}
                className="jing-card"
                initial={{ opacity: 0, y: 20 }}
                animate={{ opacity: 1, y: 0 }}
                transition={{ duration: 0.6, delay: index * 0.1 }}
              >
                <h2 className="text-2xl font-bold text-white mb-6">{benefitGroup.level}权益</h2>
                <div className="grid md:grid-cols-2 gap-6">
                  {benefitGroup.benefits.map((benefit, idx) => {
                    const Icon = benefit.icon
                    return (
                      <div key={idx} className="p-4 glass-effect rounded-lg">
                        <div className="flex items-start space-x-3">
                          <div className="w-10 h-10 jing-gradient rounded-lg flex items-center justify-center">
                            <Icon size={20} className="text-white" />
                          </div>
                          <div className="flex-1">
                            <h3 className="text-lg font-semibold text-white mb-1">{benefit.name}</h3>
                            <p className="text-white/70 text-sm">{benefit.description}</p>
                          </div>
                        </div>
                      </div>
                    )
                  })}
                </div>
              </motion.div>
            ))}
          </motion.div>
        )}
      </div>
    </div>
  )
}

export default CreatorCertification


